<template>
  <div class="my">
    <div class="user">
      <img src="#" alt="" />
      <div class="name">用户名</div>
    </div>
    <div class="nav">
      <NavBar txt="历史记录" wh="60px" fcolor="#666"></NavBar>
      <NavBar txt="我的收藏" wh="60px" fcolor="#666"></NavBar>
      <NavBar txt="我的点赞" wh="60px" fcolor="#666"></NavBar>
    </div>
    <div class="list">
      <SsRow txt="推荐分享"></SsRow>
      <SsRow txt="推荐分享"></SsRow>
      <SsRow txt="推荐分享"></SsRow>
      <SsRow txt="推荐分享"></SsRow>
    </div>
  </div>
</template>

<script>
import SsRow from "@/components/SsRow.vue";

export default {
  components: {
    SsRow,
  },
};
</script>

<style lang="less" scoped>
.my {
  height: 1000px;
  background-color: #eee;
  .user {
    display: flex;
    height: 100px;
    align-items: center;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
    .name {
      flex: 1;
      margin-left: 20px;
      font-size: 20px;
      color: #000;
    }
  }
  .nav {
    display: flex;
    background-color: #fff;
    justify-content: space-around;
  }
}
</style>
